import React from 'react'
import { IGoodList } from '@/model/declare'
import { Card } from '@/components/Card'
import { View, ScrollView } from '@tarojs/components'
import { GoodEle, Direction } from '@/components/Good'
import { cartModel } from '@/model/CartModel'
// import { useLocalStore, Observer } from 'mobx-react'
import { Observer, useLocalStore } from 'mobx-react-lite'



export const ScrollGoodsList: React.FC<IGoodList> = (props) => {

    const store = useLocalStore(() => cartModel)

    return (
        <Card title={props.title}>
            <ScrollView scrollX className='xxm-scroll-vm'>
                {
                    props.items.filter(it => it).map((it, idx) => {
                        return (
                            <Observer> 
                                {
                                    () => {
                                        return (
                                            <View className='xxm-scroll-item' >
                                                <GoodEle
                                                  direction={Direction.COLUMN}
                                                  id={it.id}
                                                  img={it.main_pic}
                                                  title={it.nick || it.name}
                                                  desc={it.brief}
                                                  price={it.price}
                                                  oldPrice={it.market_price}
                                                  discount={it.dis}
                                                  number={it.number || 0}
                                                  onAdd={async (num) => {
                                                        const ans = await store.addCart({
                                                            number: num,
                                                            Good: it
                                                        })
                                                        return ans;
                                                    }}
                                                />
                                            </View>
                                        )
                                    }
                                }
                            </Observer>
                        )
                    })
                }
            </ScrollView>

        </Card>
    )
}
